<template>
	<el-carousel trigger="click" :height="FieldItem?.attrs.height" style="width: 100%" :interval="FieldItem?.attrs.interval" ref="carousel">
		<el-carousel-item v-for="item in imgList" :key="item" class="imgItem">
			<el-link :href="imgLink" style="width: 100%; height: 100%" :underline="false" :disabled="!FieldItem?.attrs.imgLink" class="link">
				<el-image :src="getImgSrc(item[FieldItem?.attrs.imgContent])" :fit="FieldItem?.attrs.imgMode" class="img"></el-image>
			</el-link>
		</el-carousel-item>
	</el-carousel>
</template>

<script setup lang="ts">
// 走马灯组件
import Lxy_page_event_remote from '../custom/CustomCommon/lxy_page_event_remote.js';
import { TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
const props = withDefaults(
	defineProps<{
		FieldItem: TabFieldType | null;
		pageData?: Record<string, any>;
		inputData?: Record<string, any>;
		globalData?: Record<string, any>;
	}>(),
	{
		FieldItem: null,
	}
);

const { FieldItem, pageData, inputData, globalData } = toRefs(props);
const imgList = ref([]);
let imgLink = ref('');
const carousel = ref();

onBeforeMount(async () => {
	await init();
	getImgLink();
});

const init = async () => {
	// 调用远程方法并触发
	const remoteEvent = new Lxy_page_event_remote(FieldItem.value?.dynamicOptions);
	remoteEvent.setDataSrc(pageData?.value, inputData?.value, globalData?.value);
	const result = await remoteEvent.callEvent(null);
	// 接口返回的结果
	if (!result || !result.Records) {
		console.error('[Error]call remote method fail, itme: ', FieldItem.value?.FieldName);
	} else {
		imgList.value = result.Records.filter((f: Record<string, any>) => f[FieldItem.value?.attrs.imgContent]);
		setTimeout(() => {
			carousel.value.setActiveItem(0);
		});
	}
};
// 得到图片路径 xxx:=xxx.jpg ==>xxx.jpg
const getImgSrc = (imgUrl: string): string => {
	if (imgUrl.includes(':=')) {
		return imgUrl.split(':=')[1];
	} else {
		return imgUrl;
	}
};
// 得到图片跳转的路径
const getImgLink = () => {
	imgLink.value = FieldItem.value?.attrs.imgLink;
	if (FieldItem.value?.attrs.imgParams.length) {
		let params = '?';
		// 有几张图片
		for (let i = 0; i < FieldItem.value?.attrs.imgParams.length; i++) {
			const param = FieldItem.value?.attrs.imgParams[i];
			params += param + (i === FieldItem.value?.attrs.imgParams.length - 1 ? '' : '&');
		}
		imgLink.value += params;
	}
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.imgItem {
	text-align: center;
	.img {
		width: 100%;
		height: 100%;
	}
	.el-link.is-disabled {
		cursor: default;
	}
}
</style>
